<div class=" p-4 border border-gray-300 hover:border-gray-400 ">
    <a href="/page/article-info/{$item->id}"
       class="block bg-cover bg-center bg-gray-200 h-36" style="background-image: url('{$item->images[0]}')"></a>
    <a href="/page/article-info/{$item->id}"
       class="block mt-4 font-bold h-12 leading-6 overflow-hidden text-base hover:underline" title="{$item->title}">
        {$item->title}
    </a>
    <div class="text-gray-400 mt-2  h-12 leading-6 overflow-hidden">{$item->descriptions}</div>
    <div class="flex items-center gap-2 mt-2 text-gray-400">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
             stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
        </svg>
        <div>{$item->view}</div>
    </div>
</div>